<template>
  <el-drawer
    :visible="visible"
    size="100%"
    direction="rtl"
    :before-close="handleClose"
    :modal="false"
    custom-class="custom-dialog"
    :withHeader="false"
    destroy-on-close
    style="position: absolute"
  >
    <div class="dialog-title">
      <div class="back" @click="handleClose">
        <i class="el-icon-back"></i>
      </div>
      <div class="title">
        {{ info?.filename }}
      </div>
    </div>
    <el-scrollbar
      style="height: calc(100vh - 44px)"
      v-loading="loading"
      element-loading-text="文件加载中"
    >
      <codemirror
        ref="myCm"
        v-if="codeContent"
        :value="codeContent"
        :options="options"
        @ready="handleReady"
      />
    </el-scrollbar>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="visible = false">确 定</el-button>
    </span>
  </el-drawer>
</template>
<script>
import { codemirror } from 'vue-codemirror'
import panUtil from '../../../utils/common'
import axios from 'axios'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/eclipse.css'
import 'codemirror/mode/htmlmixed/htmlmixed.js'
export default {
  props: {
    visible: false,
    info: {
      type: Object,
      default: function () {
        return {
          fileId: '',
          parentId: '',
          filename: '',
          folderFlag: 0,
          fileSizeDesc: '',
          fileType: 0,
          createTime: '',
          updateTime: '',
        }
      },
    },
  },
  components: {
    codemirror,
  },
  data() {
    return {
      codeContent: null,
      loading: true,
      editor: null,
      options: {
        tabSize: 4,
        styleActiveLine: true,
        lineNumbers: true,
        line: true,
        mode: 'text/text',
        lineWrapping: true,
        theme: 'eclipse',
        foldGutter: true,
        scrollbarStyle: null,
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        readOnly: true,
        hintOptions: {
          // 当匹配只有一项的时候是否自动补全
          completeSingle: false,
        },
        highlightSelectionMatches: {
          minChars: 2,
          style: 'matchhighlight',
          showToken: true,
        },
      },
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('onClose')
      this.codeContent = null
    },
    init() {
      const fileId = this.info.fileId
      const _this = this
      _this.loading = true

      switch (this.info.fileType) {
        case 6:
          _this.options.mode = 'text/text'
          _this.options.lineNumbers = false
          break
        case 11:
          _this.options.mode = 'text/javascript'
          _this.options.lineNumbers = true
          break
      }
      axios
        .get(panUtil.getPreviewUrl(fileId))
        .then((res) => {
          if (res.status === 200) {
            _this.codeContent = res.data
            // _this.editor = _this.$refs.myCm.codemirror
            // // 设置codemirror高度为600
            // _this.editor.setSize('auto', 600)
          } else {
            _this.codeContent = '获取资源失败'
          }
        })
        .catch((err) => {
          _this.codeContent = '获取资源失败'
        })
    },
    handleReady() {
      this.loading = false
    },
  },
  watch: {
    info: {
      handler: function (val) {
        if (val && val.filename && val.fileId) {
          this.init()
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    // this.init()
  },
}
</script>
<style lang="scss" scoped>
:deep(.custom-dialog) {
  &.is-fullscreen {
    left: 194px;
    width: calc(100% - 194px);
    margin: 0;
  }
  .dialog-title {
    display: flex;
    font-size: 16px;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 0 5px #ccc;
    z-index: 1;
    position: relative;
    .back {
      padding-right: 10px;
      transition: all 0.4s;
      cursor: pointer;
      &:hover {
        opacity: 0.5;
      }
    }
  }
  .el-drawer__body {
    background-color: #e7e9db;
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
}

:deep(.CodeMirror) {
  // margin: 15px 0;
  height: auto !important;
  // height: calc(100vh - 44px) !important;
  /*min-height: 100px;*/
  .CodeMirror-scroll {
    min-height: calc(100vh - 44px) !important;
  }
}
</style>
